<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
    </view>
    <!-- <view class="sugg-list" v-if="searchResults.length !== 0"> -->
    <view class="sugg-list" v-if="searchResults.lenght !== 0 & kw.length !==0">
      <view class="sugg-item" v-for="(item, i2) in searchResults" :key="i2" @click="gotoDetail(item)">
        <view class="goods-name">{{item.cat_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <view class="history-box" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag :text="item" v-for="(item, i) in  histories" :key="i" @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>

  </view>
</template>


<script>
  export default {
    data() {
      return {
        timer: null,
        kw: '',
        historyList: ['a', 'app', 'apple'],
        searchResults: [{
            "i2": "1",
            "cat_name": "焦虑障碍"
          },
          {
            "i2": "2",
            "cat_name": "抑郁症"
          }, {
            "i2": "3",
            "cat_name": "精神分裂症"
          }, {
            "i2": "4",
            "cat_name": "双相情感障碍"
          }, {
            "i2": "5",
            "cat_name": "强迫症"
          }, {
            "i2": "6",
            "cat_name": "广泛性焦虑障碍"
          }, {
            "i2": "7",
            "cat_name": "失眠障碍"
          }, {
            "i2": "8",
            "cat_name": "自闭症"
          }, {
            "i2": "9",
            "cat_name": "注意缺陷多动障碍（多动症）"
          }, {
            "i2": "10",
            "cat_name": "自恋型人格障碍"
          }, {
            "i2": "11",
            "cat_name": "恐惧症"
          }, {
            "i2": "12",
            "cat_name": "社交焦虑障碍"
          }, {
            "i2": "13",
            "cat_name": "产后抑郁症"
          }, {
            "i2": "14",
            "cat_name": "妄想性障碍"
          }, {
            "i2": "15",
            "cat_name": "分离焦虑障碍"
          }, {
            "i2": "16",
            "cat_name": "品行障碍"
          }, {
            "i2": "17",
            "cat_name": "神经性厌食"
          }, {
            "i2": "18",
            "cat_name": "异食癖"
          }, {
            "i2": "19",
            "cat_name": "发作性睡病"
          }, {
            "i2": "20",
            "cat_name": "梦游症"
          }, {
            "i2": "21",
            "cat_name": "原发性震颤"
          },
          {
            "i2": "22",
            "cat_name": "阿尔兹海默症"
          }, {
            "i2": "23",
            "cat_name": "亨廷顿舞蹈病"
          }, {
            "i2": "24",
            "cat_name": "血管性痴呆"
          }, {
            "i2": "25",
            "cat_name": "帕金森病"
          }, {
            "i2": "26",
            "cat_name": "脑梗死"
          }, {
            "i2": "27",
            "cat_name": "偏头痛"
          }, {
            "i2": "28",
            "cat_name": "紧张型头痛"
          }, {
            "i2": "29",
            "cat_name": "癫痫"
          }, {
            "i2": "30",
            "cat_name": "头痛"
          }, {
            "i2": "31",
            "cat_name": "三叉神经痛"
          }, {
            "i2": "32",
            "cat_name": "特发性面神经麻痹（周围性面瘫）"
          }, {
            "i2": "33",
            "cat_name": "头晕"
          }, {
            "i2": "34",
            "cat_name": "神经衰弱"
          }, {
            "i2": "35",
            "cat_name": "梅尼埃病"
          }, {
            "i2": "36",
            "cat_name": "病毒性脑膜炎"
          }, {
            "i2": "37",
            "cat_name": "脑震荡"
          },
          {
            "i2": "38",
            "cat_name": "家庭关系"
          },
          {
            "i2": "39",
            "cat_name": "情感危机"
          }, {
            "i2": "40",
            "cat_name": "恋爱困扰"
          }, {
            "i2": "41",
            "cat_name": "恐婚"
          }, {
            "i2": "42",
            "cat_name": "情感纠葛"
          }, {
            "i2": "43",
            "cat_name": "婚姻危机"
          }, {
            "i2": "44",
            "cat_name": "性心理"
          }, {
            "i2": "45",
            "cat_name": "情绪化"
          },
          {
            "i2": "46",
            "cat_name": "易怒"
          }, {
            "i2": "47",
            "cat_name": "心情压抑"
          }, {
            "i2": "48",
            "cat_name": "心理恐惧"
          }, {
            "i2": "49",
            "cat_name": "自卑"
          }, {
            "i2": "50",
            "cat_name": "单亲儿童心理问题"
          },
          {
            "i2": "51",
            "cat_name": "亲子关系"
          }, {
            "i2": "52",
            "cat_name": "叛逆心理"
          }, {
            "i2": "53",
            "cat_name": "考试焦虑"
          }, {
            "i2": "54",
            "cat_name": "网瘾、赌瘾"
          }, {
            "i2": "55",
            "cat_name": "学习障碍"
          }, {
            "i2": "56",
            "cat_name": "发育迟滞"
          }, {
            "i2": "57",
            "cat_name": "抽动障碍"
          }, {
            "i2": "58",
            "cat_name": "专注力差"
          }, {
            "i2": "59",
            "cat_name": "学习困难"
          }, {
            "i2": "60",
            "cat_name": "社会适应不良"
          }, {
            "i2": "61",
            "cat_name": "青春期心理"
          }, {
            "i2": "62",
            "cat_name": "网瘾"
          }
        ]
      };
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
    methods: {
      input(e) {

        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          this.getSearchList()
        }, 500)

      },
      getSearchList() {
        this.saveSearchHistory()
        // 判断关键词是否为空
        if (this.kw === '') {
          this.searchResults = []
          return
        } else {
          return this.searchResults = [{
              "i2": "1",
              "cat_name": "焦虑障碍"
            },
            {
              "i2": "2",
              "cat_name": "抑郁症"
            }, {
              "i2": "3",
              "cat_name": "精神分裂症"
            }, {
              "i2": "4",
              "cat_name": "双相情感障碍"
            }, {
              "i2": "5",
              "cat_name": "强迫症"
            }, {
              "i2": "6",
              "cat_name": "广泛性焦虑障碍"
            }, {
              "i2": "7",
              "cat_name": "失眠障碍"
            }, {
              "i2": "8",
              "cat_name": "自闭症"
            }, {
              "i2": "9",
              "cat_name": "注意缺陷多动障碍（多动症）"
            }, {
              "i2": "10",
              "cat_name": "自恋型人格障碍"
            }, {
              "i2": "11",
              "cat_name": "恐惧症"
            }, {
              "i2": "12",
              "cat_name": "社交焦虑障碍"
            }, {
              "i2": "13",
              "cat_name": "产后抑郁症"
            }, {
              "i2": "14",
              "cat_name": "妄想性障碍"
            }, {
              "i2": "15",
              "cat_name": "分离焦虑障碍"
            }, {
              "i2": "16",
              "cat_name": "品行障碍"
            }, {
              "i2": "17",
              "cat_name": "神经性厌食"
            }, {
              "i2": "18",
              "cat_name": "异食癖"
            }, {
              "i2": "19",
              "cat_name": "发作性睡病"
            }, {
              "i2": "20",
              "cat_name": "梦游症"
            }, {
              "i2": "21",
              "cat_name": "原发性震颤"
            },
            {
              "i2": "22",
              "cat_name": "阿尔兹海默症"
            }, {
              "i2": "23",
              "cat_name": "亨廷顿舞蹈病"
            }, {
              "i2": "24",
              "cat_name": "血管性痴呆"
            }, {
              "i2": "25",
              "cat_name": "帕金森病"
            }, {
              "i2": "26",
              "cat_name": "脑梗死"
            }, {
              "i2": "27",
              "cat_name": "偏头痛"
            }, {
              "i2": "28",
              "cat_name": "紧张型头痛"
            }, {
              "i2": "29",
              "cat_name": "癫痫"
            }, {
              "i2": "30",
              "cat_name": "头痛"
            }, {
              "i2": "31",
              "cat_name": "三叉神经痛"
            }, {
              "i2": "32",
              "cat_name": "特发性面神经麻痹（周围性面瘫）"
            }, {
              "i2": "33",
              "cat_name": "头晕"
            }, {
              "i2": "34",
              "cat_name": "神经衰弱"
            }, {
              "i2": "35",
              "cat_name": "梅尼埃病"
            }, {
              "i2": "36",
              "cat_name": "病毒性脑膜炎"
            }, {
              "i2": "37",
              "cat_name": "脑震荡"
            },
            {
              "i2": "38",
              "cat_name": "家庭关系"
            },
            {
              "i2": "39",
              "cat_name": "情感危机"
            }, {
              "i2": "40",
              "cat_name": "恋爱困扰"
            }, {
              "i2": "41",
              "cat_name": "恐婚"
            }, {
              "i2": "42",
              "cat_name": "情感纠葛"
            }, {
              "i2": "43",
              "cat_name": "婚姻危机"
            }, {
              "i2": "44",
              "cat_name": "性心理"
            }, {
              "i2": "45",
              "cat_name": "情绪化"
            },
            {
              "i2": "46",
              "cat_name": "易怒"
            }, {
              "i2": "47",
              "cat_name": "心情压抑"
            }, {
              "i2": "48",
              "cat_name": "心理恐惧"
            }, {
              "i2": "49",
              "cat_name": "自卑"
            }, {
              "i2": "50",
              "cat_name": "单亲儿童心理问题"
            },
            {
              "i2": "51",
              "cat_name": "亲子关系"
            }, {
              "i2": "52",
              "cat_name": "叛逆心理"
            }, {
              "i2": "53",
              "cat_name": "考试焦虑"
            }, {
              "i2": "54",
              "cat_name": "网瘾、赌瘾"
            }, {
              "i2": "55",
              "cat_name": "学习障碍"
            }, {
              "i2": "56",
              "cat_name": "发育迟滞"
            }, {
              "i2": "57",
              "cat_name": "抽动障碍"
            }, {
              "i2": "58",
              "cat_name": "专注力差"
            }, {
              "i2": "59",
              "cat_name": "学习困难"
            }, {
              "i2": "60",
              "cat_name": "社会适应不良"
            }, {
              "i2": "61",
              "cat_name": "青春期心理"
            }, {
              "i2": "62",
              "cat_name": "网瘾"
            }
          ]



        }

      },

      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/disorders_detail/disorders_detail?i2=' + item.i2
        })
      },
      saveSearchHistory() {
        // 2.1 直接把搜索关键词 push 到 historyList 数组中
        // this.historyList.push(this.kw)
        // 去重
        const set = new Set(this.historyList)
        set.delete(this.kw)
        set.add(this.kw)
        this.historyList = Array.from(set)
        // 用uni.setStorageSync将搜索历史记录存储到本地
        uni.setStorageSync('kw', JSON.stringify(this.historyList))

      },
      cleanHistory() {
        this.historyList = []
        // 清空本地存储中记录的搜索历史
        uni.setStorageSync('kw', '[]')
      },
      gotoGoodsList(kw) {
        uni.navigateTo({
          url: '/subpkg/disorders_detail/disorders_detail?query=' + kw
        })
      }
    },
    computed: {
      histories() {
        return [...this.historyList].reverse()
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

    .sugg-item {
      font-size: 12px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;
      display: flex;
      align-items: center;
      justify-content: space-between;


    }
  }

  .history-box {
    padding: 0 5px;


    .history-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 13px;

      border-bottom: 1px solid #efefef;
    }

    .history-list {
      display: flex;
      flex-wrap: wrap;


      .uni-tag {
        // background-color: #f1f0ed;
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
</style>